import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import MethodUtil from '../../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;

export const CreditInfoSection = (props) => {

	const { onDetailPress, onBillPress, currentCreditType, data } = props;



	if (data) {

		_isTime = (time1) => {
			let oDate1 = new Date(); // 当前时间
			oDate1 = oDate1.getFullYear() + '-' + (oDate1.getMonth() + 1) + '-' + oDate1.getDate();
			return new Date(time1.replace(/-/g, "\/")) > new Date(oDate1.replace(/-/g, "\/")) ? time1 : '已过期';
		}

		return (
			<View style={styles.creditContent}>
				<Text style={styles.creditTitle} onPress={() => onDetailPress()}>{currentCreditType === 1 ? '预付' : '赊销'}授信账户（{currentCreditType === 1 ? '供应商' : '客户'})</Text>
				<View style={styles.creditTimeView}>
					<Text style={styles.creditEndTime}>有效期至 | {this._isTime(data.creditEndDate)}</Text>
					<Text style={styles.paymentDays}>账期 | {(data.accountDay || '-') + '天'}</Text>
					<Text style={styles.paymentDays}>状态 | {(data.creditStatusName || '-')}</Text>
				</View>
				<View style={styles.creditLimitView}>
					<Text style={styles.creditLimitLabel}>授信额度（元）</Text>
					<Text style={styles.creditLimitLabel}>中信保编号</Text>
				</View>
				<View style={styles.creditLimitView}>
					<Text style={styles.creditLimitValue}>{data.creditAmount ? ('¥' + MethodUtil.toThousands(data.creditAmount || 0) + '元') : '-'}</Text>
					<Text style={styles.creditLimitValue}>{data.zxbCreditCode || '-'}</Text>
				</View>
				<View style={styles.creditLimitView}>
					<Text style={styles.creditLimitLabel}>实际占用（元）</Text>
					<Text style={styles.creditLimitLabel}>剩余额度（元）</Text>
				</View>
				<View style={styles.creditLimitView}>
					<Text style={styles.creditLimitValue}>{data.usedAmount ? ('¥' + MethodUtil.toThousands(data.usedAmount || 0) + '元') : '-'}</Text>
					<Text style={styles.creditLimitValue}>{data.limitAmount ? ('¥' + MethodUtil.toThousands(data.limitAmount || 0) + '元') : '-'}</Text>
				</View>
				<TouchableOpacity style={styles.creditBillBtn} activeOpacity={0.8} onPress={() => onBillPress()}>
					<Text style={styles.creditBill}>授信账单 ></Text>
				</TouchableOpacity>
			</View>
		)
	} else {
		return (
			<View style={styles.creditContent}>
				<View style={styles.emptyText}>
					<Text>暂未申请开通授信账户</Text>
				</View>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	creditContent: {
		backgroundColor: '#fff',
		borderRadius: 4 * scale,
		width: 351 * scale,
		height: 228 * scale,
		marginLeft: 12 * scale,
		marginTop: 16 * scale,
		marginBottom: 16 * scale,
		paddingTop: 17 * scale,
		paddingBottom: 17 * scale,
		paddingLeft: 26 * scale,
		top: -68 * scale,
	},
	emptyText: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	},
	creditTitle: {
		color: style.color.themeColor,
		fontSize: 12 * scale,
		fontWeight: '600'
	},
	creditTimeView: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	creditEndTime: {
		flex: 2,
		paddingTop: 10 * scale,
		color: '#848A96',
		fontSize: 12 * scale,
	},
	paymentDays: {
		flex: 1,
		paddingTop: 10 * scale,
		color: '#848A96',
		fontSize: 12 * scale
	},
	creditAmountLabel: {
		marginTop: 17 * scale,
		color: '#000',
		fontSize: 12 * scale
	},
	creditAmount: {
		marginTop: 7 * scale,
		color: '#000',
		fontSize: 14 * scale
	},
	creditLimitView: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	creditLimitLabel: {
		flex: 1,
		marginTop: 17 * scale,
		color: '#000',
		fontSize: 12 * scale
	},
	creditLimitValue: {
		flex: 1,
		marginTop: 7 * scale,
		color: '#000',
		fontSize: 14 * scale
	},
	creditBill: {
		color: style.color.themeColor,
		fontSize: 14 * scale,
		fontWeight: '600'
	},
	creditBillBtn: {
		flex: 1,
		marginTop: 14 * scale,
	},
})